<template>
    <div class="container">
        <div class="item-title"><span>站场统计</span> <span class="text-grey">guizhoutianranqi</span></div>
        <div class="content-box">
            <div class="left">
                <div class="top">
                    <img src="@/assets/images/pipe_icon_blue.png" />
                    <p>
                        <span class="text-blue">{{stationData.num}}</span>
                        <span class="text-grey">个</span>
                    </p>
                </div>
                <div class="bottom">
                    <p class="text-grey"><span>分输站</span><span class="text-blue2">{{stationData.offtakeStationNum}}个</span></p>
                    <p class="text-grey"><span>阀室</span><span class="text-blue2">{{stationData.valveChestNum}}个</span></p>
                    <p class="text-grey"><span>首站</span><span class="text-blue2">{{stationData.initialStationNum}}个</span></p>
                    <p class="text-grey"><span>末站</span><span class="text-blue2">{{stationData.terminalNum}}个</span></p>
                </div>
            </div>
            <div class="right">
                <div class="item item-green">
                    <span class="text-green2">投运</span>
                    <p>
                        <span class="text-green2">{{stationData.run}}</span>
                        <span class="text-grey">个</span>
                    </p>
                    <!-- <p>
                        <span class="text-white">{{stationData.num}}</span>
                        <span class="text-grey">km</span>
                    </p> -->
                </div>
                <div class="item item-blue">
                    <span class="text-blue3">在建</span>
                    <p>
                        <span class="text-blue3">{{stationData.noRun}}</span>
                        <span class="text-grey">个</span>
                    </p>
                    <!-- <p>
                        <span class="text-white">{{stationData.num}}</span>
                        <span class="text-grey">km</span>
                    </p> -->
                </div>
                <div class="item item-yellow">
                    <span class="text-yellow2">拟建</span>
                    <p>
                        <span class="text-yellow2">{{stationData.preparation}}</span>
                        <span class="text-grey">个</span>
                    </p>
                    <!-- <p>
                        <span class="text-white">{{stationData.num}}</span>
                        <span class="text-grey">km</span>
                    </p> -->
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import {getStationCount} from "@/api/visual/overview.js"
export default {
    data() {
        return{
            stationData: {},
        }
    },
    mounted(){
        getStationCount({centerId:0}).then(res=>{
            this.stationData = res.data;
        })
    }
}
</script>

<style lang="scss" scoped>
.content-box {
    .left {
        .bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            p {
                width: 48%;
                font-size: 14px;
                span:first-of-type {
                    display: inline-block;
                    width: 50%;
                }
            }
        }
    }
    .right {
        .item {
            justify-content: space-between;
            >span {
                position: relative;
                display: inline-block;
                text-indent: 20px;
                &::before {
                    position: absolute;
                    left: 0;
                    top: 3px;
                    content: "";
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    border: 2px solid rgba(255,255,255,0.5);
                }
            }

            &.item-green {
                >span {
                    &::before {
                        background: #2CC970 ;
                    }
                }
            }
            &.item-blue {
                >span {
                    &::before {
                        background: #1EF0FF ;
                    }
                }
            }
            &.item-yellow {
                >span {
                    &::before {
                        background: #FFF78A;
                    }
                }
            }
            p {
                span:last-of-type {
                    margin-left: 5px;
                }
            }
            p:first-of-type {
                span:first-of-type {
                    font-size: 20px;
                    font-weight: bold;
                }
            }
            p:last-of-type {
                span:first-of-type {
                    font-size: 16px;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>
